<template>
  <view>
    <view class="colorB" style="padding:30rpx;">
      <block v-for="(item,index) in orderInfo" :key="index">
        <view class="" style="text-align: center; margin-bottom: 30px"
          v-if="item.orderStatus === '4' || item.orderStatus === '6'">
          <text class="colorB">停止理由：</text>
          <span style="color: red">{{ item.stopReasonMsg }}</span>
        </view>
        <uni-steps
          :options="[{title: '客户下单',desc:item.createTime}, {title: '开始充电',desc: item.orderStatusDescribe}, {title: '结束充电',desc: item.endTime}, {title: '完成充电',desc: '充电时长'}]"
          :active="item.orderStatus !== '6' ? 2 : 4" activeIcon="checkbox" activeColor="red"></uni-steps>
        <uni-title title="订单信息" type="h1" />
        <view class="mainColor border-10" style="border: 1px solid #fff;">
          <view class="flex justify-between align-center padding-10">
            <view>订单号：{{item.orderCode}}</view>
            <view>{{item.orderStatusDescribe}}</view>
          </view>
          <view class="padding-10">交易流水号：{{item.transactionCode}}</view>
          <view class="padding-10">卡号：{{item.logicCard || '一'}}</view>
          <view class="padding-10">创建时间：{{item.createTime}}</view>
          <view class="padding-10">开始时间：{{item.startTime}}</view>
          <view class="padding-10">结束时间：{{item.endTime}}</view>
          <view class="padding-10">起始SOC：{{item.startSOC || '一'}}</view>
          <view class="padding-10">终止SOC：{{item.endSOC || '一'}}</view>
          <view class="padding-10">订单停止原因：{{item.stopReasonMsg || '一'}}</view>
        </view>
      </block>
      <!--  <uni-title title="收费明细" type="h1" />
      <view class="mainColor border-10" style="border: 1px solid #fff;">
        <block v-for="(item,index) in orderDetail" :key="index">
          <view class="padding-10">总用电量：{{item.totalUsedElectricity || '一'}}</view>
          <view class="padding-10">订单总金额：{{item.totalOrderAmount || '一'}}</view>
          <view class="padding-10">电费总金额：{{item.totalElectricityAmount || '一'}}</view>
          <view class="padding-10">服务费总金额：{{item.totalServiceAmount || '一'}}</view>
          <view class="padding-10">尖时段用电量：{{item.sharpUsedElectricity || '一'}}</view>
          <view class="padding-10">尖时段电费单价：{{item.sharpElectricityPrice || '一'}}</view>
          <view class="padding-10">尖时段服务费单价：{{item.sharpServicePrice || '一'}}</view>
          <view class="padding-10">峰时段用电量：{{item.peakUsedElectricity || '一'}}</view>
          <view class="padding-10">峰时段电费单价：{{item.peakElectricityPrice || '一'}}</view>
          <view class="padding-10">峰时段服务费单价：{{item.peakServicePrice || '一'}}</view>
          <view class="padding-10">平时段用电量：{{item.flatUsedElectricity || '一'}}</view>
          <view class="padding-10">平时段电费单价：{{item.flatElectricityPrice || '一'}}</view>
          <view class="padding-10">平时段服务费单价：{{item.flatServicePrice || '一'}}</view>
          <view class="padding-10">谷时段用电量：{{item.valleyUsedElectricity || '一'}}</view>
          <view class="padding-10">谷时段电费单价：{{item.valleyElectricityPrice || '一'}}</view>
          <view class="padding-10">谷时段服务费单价：{{item.valleyServicePrice || '一'}}</view>
        </block>
      </view> -->
      <uni-title title="收费明细new" type="h1" />

      <view class="mainColor border-10" style="border: 1px solid #fff;">
        <uni-table border stripe emptyText="暂无更多数据">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th width="30">时段类型</uni-th>
            <uni-th width="30">电费单价(元/千瓦时)</uni-th>
            <uni-th width="30">服务费单价(元/千瓦时)</uni-th>
            <uni-th width="30">用电量(千瓦时)</uni-th>
            <uni-th width="30">电费金额(元)</uni-th>
            <uni-th width="30">服务费金额(元)</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="item in tableData" :key="item.id">
            <uni-td>{{ item.periodType }}</uni-td>
            <uni-td>{{ item.electricityPrice }}</uni-td>
            <uni-td>{{ item.servicePrice }}</uni-td>
            <uni-td>{{ item.usedElectricity }}</uni-td>
            <uni-td>{{ item.electricityAmount }}</uni-td>
            <uni-td>{{ item.serviceAmount }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
      <uni-title title="实时订单数据" type="h1" />
      <view class="mainColor border-10" style="border: 1px solid #fff;">
        <block v-for="(item,index) in orderRealTimeInfo" :key="index">
          <view class="padding-10">消费金额：{{item.orderAmount || '一'}}</view>
          <view class="padding-10">充电度数：{{item.chargedDegree || '一'}}</view>
          <view class="padding-10">充电时长：{{item.chargingTime || '一'}}</view>
          <view class="padding-10">当前soc：{{item.soc || '一'}}</view>
        </block>
      </view>
      <uni-title title="支付信息" type="h1" />
      <view class="mainColor border-10" style="border: 1px solid #fff;">
        <template v-if="payDetail == null">
          <view class="padding-10">暂无数据</view>
        </template>
        <block v-for="(item,index) in payDetail" :key="index" v-else>
          <view class="padding-10">支付金额：{{item.payAmount}}</view>
          <view class="padding-10">支付方式：{{item.payModeDesc}}</view>
          <view class="padding-10">支付状态：{{item.payStatus === "1" ? "支付完成" : "待支付"}}</view>
          <view class="padding-10">支付时间：{{item.payTime}}</view>
          <view class="padding-10">商务单号：{{item.outTradeNo || '一'}}</view>
        </block>
      </view>
      <uni-title title="设备信息" type="h1" />
      <view class="mainColor border-10" style="border: 1px solid #fff;">
        <template v-if="pileIn[0] == null">
          <view class="padding-10">暂无数据</view>
        </template>
        <block v-for="(item,index) in pileIn" :key="index" v-else>
          <view class="padding-10">运营商名称：{{item.merchantName}}</view>
          <view class="padding-10">设备编号：{{item.pileSn}}</view>
          <view class="padding-10">额定电流（A）：{{item.ratedCurrent}}</view>
          <view class="padding-10">额定电压（V）：{{item.ratedVoltage}}</view>
          <view class="padding-10">额定功率（KW）：{{item.ratedPower}}</view>
        </block>
      </view>
      <uni-title title="用户信息" type="h1" />
      <view class="mainColor border-10" style="border: 1px solid #fff;">
        <block v-for="(item,index) in userInfo" :key="index">
          <view class="padding-10">用户昵称：{{item.nickName}}</view>
          <view class="padding-10">用户手机号：{{item.mobileNumber}}</view>
          <view class="padding-10">本金金额：{{item.principalBalance}}</view>
          <view class="padding-10">赠送金额：{{item.giftBalance}}</view>
          <view class="padding-10">总金额：{{item.totalAccountAmount}}</view>
        </block>
      </view>
    </view>
  </view>
</template>
<script>
  import {
    getOrder
  } from "@/api/order/order";
  import {
    startMode,
    payMode,
    payStatus
  } from '@/common/dict.js'
  export default {
    data() {
      return {
        orderInfo: [],
        payDetail: [],
        userInfo: [],
        obj: {},
        orderDetail: [],
        pileIn: [],
        orderRealTimeInfo: null,
        orderCode: null,
        lastMonitorData: {},
        monitorDataList: [this.lastMonitorData],
        // 手动结算参数
        manualSettlementParam: {
          orderCode: null,
          chargingAmount: null,
          chargingDegree: null,
        },
        tableData: []
      }
    },
    onLoad(option) {
      this.orderCode = option.orderCode
      console.log(option.orderCode, '接收充电订单传递的值');
      this.getOrderDetail()
    },
    methods: {

      payMode(type) {
        payMode.then(res => {
          this.payModeList = res
        })
        let str = this.payModeList.find(item => {
          return item.dictValue == type
        })
        if (str == null) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      async getOrderDetail() {
        const {
          data
        } = await getOrder(this.orderCode)
        console.log(data, 'data 订单详情');
        this.orderInfo = [data.orderInfo];
        console.log("this.orderInfo", this.orderDetail);
        this.payDetail = data.payRecordList;
        console.log("this.payDetail", this.payDetail);
        this.userInfo = [data.memberInfo];
        console.log("this.userInfo", this.userInfo);
        this.pileIn = [data.pileInfo];
        console.log("this.pileIn", this.pileIn);
        this.orderRealTimeInfo = [data.orderRealTimeInfo];
        this.orderDetail = [data.billingDetails];
        this.tableData = data.chargeDetails;
        this.lastMonitorData = data.lastMonitorData;
      },

    }
  }
</script>
<style lang="scss">
  page {
    background-color: $uni-bg-color !important;
  }
</style>
<style lang="scss" scoped>
  .scroll-Y {
    height: 400rpx;
  }

  .uni-group {
    display: flex;
    align-items: center;
  }

  .goods_nav {

    display: flex;

    height: 7%;

    // margin-top: 100rpx;
    // margin-bottom: 100px;
    align-items: center;
    justify-content: space-between;

    .goods_btn {
      // height: 40px;
      width: 50%;
      text-align: center;
      line-height: 40px;
      background: #2979ff;
      border-radius: 45px;
      color: #fff;
    }

  }

  .startBtn {
    width: 50%;
    margin-right: 20rpx;
    text-align: center;
    line-height: 40px;
    border-radius: 45px;
    color: #fff;
    background-color: #2979ff;
  }
</style>